<template>
  <div class="history-container">
    <div class="header">
      <h1>历史版本</h1>
    </div>
    
    <div class="content">
      <div class="version-list">
        <div class="version-item" v-for="version in versions" :key="version.id">
          <div class="version-header">
            <div class="version-info">
              <h3>{{ version.version }}</h3>
              <span class="version-date">{{ version.date }}</span>
            </div>
            <a-tag :color="version.type === 'major' ? 'red' : version.type === 'minor' ? 'orange' : 'blue'">
              {{ version.type === 'major' ? '重大更新' : version.type === 'minor' ? '功能更新' : '修复更新' }}
            </a-tag>
          </div>
          
          <div class="version-content">
            <h4>更新内容：</h4>
            <ul>
              <li v-for="change in version.changes" :key="change">{{ change }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Version {
  id: number
  version: string
  date: string
  type: 'major' | 'minor' | 'patch'
  changes: string[]
}

const versions = ref<Version[]>([
  {
    id: 1,
    version: 'v2.1.0',
    date: '2024-01-15',
    type: 'minor',
    changes: [
      '新增API接口文档页面',
      '优化用户界面交互体验',
      '修复已知的安全漏洞'
    ]
  },
  {
    id: 2,
    version: 'v2.0.0',
    date: '2023-12-20',
    type: 'major',
    changes: [
      '全新的技术规范文档系统',
      '重构整体架构设计',
      '支持多版本管理'
    ]
  },
  {
    id: 3,
    version: 'v1.2.3',
    date: '2023-11-10',
    type: 'patch',
    changes: [
      '修复文档显示问题',
      '优化页面加载速度',
      '更新依赖包版本'
    ]
  }
])
</script>

<style scoped>
.history-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.header {
  padding: 24px 32px;
  border-bottom: 1px solid #f0f0f0;
}

.header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #262626;
}

.content {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
}

.version-list {
  max-width: 800px;
}

.version-item {
  margin-bottom: 24px;
  padding: 24px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

.version-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.version-info h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #262626;
}

.version-date {
  color: #8c8c8c;
  font-size: 14px;
  margin-left: 12px;
}

.version-content h4 {
  color: #262626;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.version-content ul {
  margin: 0;
  padding-left: 20px;
}

.version-content li {
  color: #595959;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 8px;
}
</style>